# Multi-Agent UI Reconstruction Report

## Disclaimer
本界面根据 Claude Code 多 Agent 日志重构。
展示 main agent 与 general-purpose worker agent 的并行任务状态。
不是实时截图。用于短视频里的"AI 工程执行中"视觉表达。

## Visual Specifications

| Element | Style | Position |
|---------|-------|----------|
| Main task star | Orange ⭐ | y=45 |
| Main task title | Orange bold, 20px | y=45 |
| Elapsed/tokens | Gray, 14px | y=78 |
| Subtask tree | Orange box for running, □ for pending | y=120-420 |
| Input divider | Gray line | y=900 |
| Prompt input | Dark box with green > cursor | y=920-975 |
| Status bar | Green bypass, gray hints | y=1040-1090 |
| Agent list label | Gray "AGENTS" | y=1130 |
| Main agent | Filled white circle | y=1170 |
| Worker agents | Hollow circles, orange fill when running | y=1240+ |
| Token/elapsed | Gray, right-aligned | per agent line |

## Multi-Agent Scene Data

Source: Claude Code screenshot (user-provided reference)

```
Main Task: 创建交互式总控入口和控制器... (1m 23s · ↓ 6.7k tokens)

Subtasks:
  ■ 创建交互式总控入口和控制器 (running)
  □ 创建 Amazon 公开产品事实采集脚本 (pending)
  □ 创建公开网页产品事实采集脚本 (pending)
  □ 重构总控编排器为7层结构 (pending)
  □ 编译测试 + 执行非交互测试 (pending)

Agents:
  ● main (active)
  ○ general-purpose — 创建 Amazon 公开产品事实采集脚本... 22s · ↓ 23.7k tokens
  ○ general-purpose — 创建公开网页产品事实采集脚本... 16s · ↓ 21.5k tokens
```

## State Type Registration

Added to schema as `multi_agent_task_state` with:
- `main_task` — title, elapsed, tokens, status
- `subtasks[]` — title, status (running/done/pending/blocked), indent
- `agents[]` — name, role (main/worker), status, task, elapsed, tokens
- `permission_bar` — mode, hint, interrupt